<template>
  <div class="home">
    <!-- 动态标题 -->
    <Navigation :return="false" :title="settings.title" />
    <!-- 轮播图 -->
    <div class="home-content">
      <div class="banner">
        <img :src="handleProxy(settings.bannerUrl)" alt="" v-if="settings.bannerUrl" />
      </div>
      <!-- 通知栏 -->
      <div class="notice-bar" v-if="currentNotice.noticeTitle" @click="handleNoticeClick()">
        <img class="notice-icon" src="/static/home/notice-icon.svg" alt="" />
        <hbxw-roll-text :value="currentNotice.noticeTitle"></hbxw-roll-text>
      </div>
      <div class="hot">
        <div class="header">
          <img src="/static/home/hot.svg" alt="" />
        </div>
        <div class="tab-list">
          <div
            class="tab"
            v-for="(item, index) in settings.hotSections"
            :key="index"
            @click="handleHotClick(item)"
          >
            <img :src="handleProxy(item.imageUrl)" :alt="item.targetValue" />
          </div>
          <div class="tab" @click="goToNotice()">
            <img src="/static/home/cover.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 顶级服务菜单 -->
      <div class="service">
        <img class="rectangle" src="/static/home/rectangle.svg" alt="" />
        <div class="header">
          <img src="/static/home/service.svg" alt="" />
        </div>
        <div class="service-list">
          <div
            class="item"
            v-for="menu in topMenus"
            :key="menu.id"
            :style="{ backgroundImage: `url(${handleProxy(menu.homeImage)})` }"
            @click="handleServiceClick(menu)"
          ></div>
        </div>
      </div>
      <!-- 地图点位分类 -->
      <div class="map">
        <img class="rectangle" src="/static/home/rectangle.svg" alt="" />
        <div class="header">
          <img src="/static/home/map.svg" alt="" />
        </div>
        <div class="map-list">
          <div
            class="item"
            v-for="category in categories"
            :key="category.id"
            :style="{
              backgroundImage: `url(${handleProxy(category.homeImage)})`,
            }"
            @click="handleMapClick(category)"
          ></div>
        </div>
      </div>
      <div class="footer">© 2025 台州市椒江区人力资源和社会保障局</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import {
  getSettings,
  getCategoryList,
  getTopMenu,
  getNoticeBanner,
  handleProxy,
} from '@/api/data.js'
import Navigation from '@/components/navigation.vue'
// 响应式数据
const settings = ref({
  title: '青椒人社通',
  bannerUrl: '',
  hotSections: [],
})
const currentNotice = ref({
  noticeTitle: '',
  noticeLink: '',
  noticeType: '',
  noticeId: '',
})
const topMenus = ref([])
const categories = ref([])
const noticeBanners = ref([])
const currentNoticeIndex = ref(0)
let noticeTimer = null

// 获取通知轮播数据
const fetchNoticeBanners = async () => {
  try {
    const res = await getNoticeBanner()
    if (res.data.code === 200) {
      noticeBanners.value = res.data.data
      if (noticeBanners.value.length > 0) {
        // 初始化显示第一条通知
        currentNotice.value = noticeBanners.value[0]
        // 启动定时器,每5秒切换一次
        startNoticeRotation()
      }
    }
  } catch (error) {
    console.error('获取通知轮播失败:', error)
  }
}

// 启动通知轮播
const startNoticeRotation = () => {
  if (noticeBanners.value.length <= 1) return

  noticeTimer = setInterval(() => {
    currentNoticeIndex.value = (currentNoticeIndex.value + 1) % noticeBanners.value.length
    currentNotice.value = noticeBanners.value[currentNoticeIndex.value]
  }, 5000) // 每5秒切换一次
}

// 停止通知轮播
const stopNoticeRotation = () => {
  if (noticeTimer) {
    clearInterval(noticeTimer)
    noticeTimer = null
  }
}

// 处理通知跳转
const handleNoticeClick = () => {
  if (!currentNotice.value) return

  // 根据noticeType进行不同的跳转处理
  if (currentNotice.value.noticeType === 'link') {
    wx.openOfficialAccountArticle({
      url: currentNotice.value.noticeLink, // 此处填写公众号文章连接
      success: (res) => {},
      fail: (res) => {},
    })
  } else if (currentNotice.value.noticeType === 'manual') {
    uni.navigateTo({
      url: `/pages/notice-detail/notice-detail?id=${currentNotice.value.noticeId}`,
    })
  } else {
    uni.showToast({
      title: '跳转失败，未知的通知类型',
      icon: 'error',
    })
  }
}

// 获取首页设置
const fetchSettings = async () => {
  try {
    const res = await getSettings()
    if (res.data.code === 200) {
      settings.value = res.data.data
      settings.value.hotSections = settings.value.hotSections
    }
  } catch (error) {
    console.error('获取首页设置失败:', error)
  }
}

// 获取顶级菜单
const fetchTopMenus = async () => {
  try {
    const res = await getTopMenu()
    if (res.data.code === 200) {
      topMenus.value = res.data.data
    }
  } catch (error) {
    console.error('获取顶级菜单失败:', error)
  }
}

// 获取分类列表
const fetchCategories = async () => {
  try {
    const res = await getCategoryList()
    if (res.data.code === 200) {
      categories.value = res.data.data
    }
  } catch (error) {
    console.error('获取分类列表失败:', error)
  }
}

// 热门区域点击事件
const handleHotClick = (item) => {
  console.log('热门区域点击:', item)
  // 根据targetType和targetValue进行路由跳转
  if (item.targetType === 'service') {
    uni.navigateTo({
      url: `/pages/service/service?name=${item.targetValue}`,
    })
  }
}

// 服务项目点击事件
const handleServiceClick = (menu) => {
  console.log('服务项目点击:', menu)
  uni.navigateTo({
    url: `/pages/service/service?name=${menu.name}`,
  })
}

// 地图分类点击事件
const handleMapClick = (category) => {
  console.log('地图分类点击:', category)
  uni.navigateTo({
    url: `/pages/source/source?categoryId=${category.id}`,
  })
}

// 前往通知公告页面
const goToNotice = () => {
  uni.navigateTo({
    url: '/pages/notice/notice',
  })
}

// 页面加载时获取数据
onMounted(() => {
  fetchSettings()
  fetchTopMenus()
  fetchCategories()
  fetchNoticeBanners()
})

// 页面卸载时清理定时器
onUnmounted(() => {
  stopNoticeRotation()
})
</script>
<style scoped lang="scss">
.home {
  background: url('https://api.taishow.cc/talent/api/files/2025/09/01/b1f6d6e0-3289-4838-ad8f-d194415948e1.png')
    no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  .home-content {
    padding: 24rpx;
  }
  .service,
  .map {
    width: 702rpx;
    background: linear-gradient(180deg, #e6faf8 0%, #ffffff 16.3%);
    border-radius: 16rpx;
    border: 3rpx solid #ffffff;
    padding: 24rpx;
    position: relative;
    .header {
      width: 246rpx;
      height: 52rpx;
      margin-bottom: 16rpx;
    }
    .rectangle {
      position: absolute;
      width: 172rpx;
      height: 88rpx;
      transform: rotateY(180deg);
      opacity: 0.6;
      border-top-left-radius: 10rpx;
      right: 0;
      top: 0;
    }
  }
  .service {
    .service-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14rpx;
      .item {
        height: 120rpx;
        border-radius: 16rpx;
        background: linear-gradient(92.93deg, #b9eff6 2.44%, #ddf7fb 51.14%),
          linear-gradient(180deg, rgba(185, 239, 246, 0) 0%, #b9eff6 100%);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        .title {
          font-family: Alimama FangYuanTi VF;
          font-weight: 600;
          font-style: SemiBold-Square;
          font-size: 32rpx;
          margin-left: 40rpx;
        }
        .icon {
          width: 88rpx;
          height: 88rpx;
          border-radius: 44rpx;
          margin-right: 16rpx;
        }
      }
    }
  }
  .map {
    margin-top: 24rpx;
    margin-bottom: 32rpx;
    .map-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14rpx;
      .item {
        height: 120rpx;
        border-radius: 16rpx;
        background: linear-gradient(92.93deg, #b9eff6 2.44%, #ddf7fb 51.14%),
          linear-gradient(180deg, rgba(185, 239, 246, 0) 0%, #b9eff6 100%);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-family: Alimama FangYuanTi VF;
          font-weight: 600;
          font-style: SemiBold-Square;
          font-size: 32rpx;
          margin-left: 40rpx;
        }
        .icon {
          width: 128rpx;
          height: 128rpx;
          rotate: -15deg;
          margin-right: 16rpx;
        }
      }
    }
  }
  .hot {
    margin-bottom: 24rpx;
    .header {
      width: 184rpx;
      height: 52rpx;
      margin-bottom: 16rpx;
    }
    .tab-list {
      display: flex;
      gap: 26rpx;
      margin-bottom: 26rpx;
    }
    .tab {
      width: 156rpx;
      height: 168rpx;
      border-top-left-radius: 16rpx;
      border-top-right-radius: 40rpx;
      border-bottom-right-radius: 16rpx;
      border-bottom-left-radius: 16rpx;
    }
  }
  .banner {
    width: 702rpx;
    height: 352rpx;
    background: #dff7f5;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
  }

  .notice-bar {
    width: 702rpx;
    height: 60rpx;
    background: linear-gradient(90deg, #fff9e6 0%, #fffbf0 100%);
    border-radius: 12rpx;
    border: 2rpx solid #ffe7b8;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    padding: 0 16rpx;
    overflow: hidden;

    .notice-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
      flex-shrink: 0;
    }
  }

  .footer {
    color: #94979c;
    font-family: PingFang SC;
    font-weight: 400;
    font-style: Regular;
    font-size: 22rpx;
    text-align: center;
    padding: 25rpx 0;
    border-top: 2rpx solid #0000000d;
  }
}
</style>
